<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        #top{
            /*height: 100px;*/
            /*overflow: hidden;*/
        }
        div{
            /*border: 1px red solid;*/
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">渠道管理</span>
        <el-button type="primary" size="small" icon="el-icon-refresh" style="float: right;margin-right: 170px">刷新</el-button>    </el-card>
</div>
<div id="main">
    <div id="form">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                <span style="font-size: 15px">数据筛选</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click=advSear()>高级搜索</el-button>

                <div id="medel_box">
                    <el-dialog title="高级搜索" :visible.sync="searchDialogFormVisible">

                        <el-form :inline="true" :model="form" ref="form" class="demo-form-inline">
                            <el-form-item label="输入查询:" style="margin-left: 10px" prop="company_name">
                                <el-input v-model="form.company_name" placeholder="请输入公司名称" style="margin-top: 15px"></el-input>
                            </el-form-item>

                            <el-form-item label="所在地区:" style="margin-left: 10px" prop="company_area">
                                <el-input v-model="form.company_area" placeholder="请输入所在地区" style="margin-top: 15px"></el-input>
                            </el-form-item>

                            <el-form-item label="创建时间:" style="margin-left: 10px" prop="create_time">
                                <el-date-picker
                                    v-model="form.create_time"
                                    type="date"
                                    placeholder="请选择日期"
                                    format="yyyy 年 MM 月 dd 日">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item label="合作渠道级别:" style="margin-left: 10px" prop="channel_level">
                                <el-select v-model="form.channel_level" placeholder="请选择合作渠道级别" style="margin-top: 15px">
                                    <el-option label="关键合作渠道" value="A"></el-option>
                                    <el-option label="主要合作渠道" value="B"></el-option>
                                    <el-option label="普通合作渠道" value="C"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="渠道状态:" style="margin-left: 10px" prop="status">
                                <el-radio-group v-model="form.status">
                                    <el-radio :label="0">已禁用</el-radio>
                                    <el-radio :label="1">已开通</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="渠道来源:" style="margin-left: 10px" prop="source">
                                <el-radio-group v-model="form.source">
                                    <el-radio :label="0">全自动创建</el-radio>
                                    <el-radio :label="1">手动创建</el-radio>
                                    <el-radio :label="2">批量导入</el-radio>
                                </el-radio-group>
                            </el-form-item>

                        </el-form>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="resetForm('form')">清除条件</el-button>
                            <el-button @click="searchDialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click=advancedSearch()>确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>
            <div align="left">
                <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
                    <el-form-item label="输入查询:" style="margin-left: 10px" prop="company_name">
                        <el-input v-model="formInline.company_name" placeholder="请输入公司名称" style="margin-top: 15px"></el-input>
                    </el-form-item>

                    <el-form-item label="所在地区:" style="margin-left: 10px" prop="company_area">
                        <el-input v-model="formInline.company_area" placeholder="请输入所在地区" style="margin-top: 15px"></el-input>
                    </el-form-item>

                    <el-form-item label="合作渠道级别:" style="margin-left: 10px" prop="channel_level">
                        <el-select v-model="formInline.channel_level" placeholder="请选择合作渠道级别" style="margin-top: 15px">
                            <el-option label="关键合作渠道" value="A"></el-option>
                            <el-option label="主要合作渠道" value="B"></el-option>
                            <el-option label="普通合作渠道" value="C"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="onSubmit" style="margin-top: 15px">查询</el-button>
                        <el-button @click="resetForm('formInline')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
    <div id="dataTable">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px">数据列表</span>
                <el-button style="float: right;margin-right: 20px" icon="el-icon-plus" type="primary" @click="channel_add">添加</el-button>
                <el-button style="float: right;margin-right: 20px" icon="el-icon-download" plain>导入</el-button>
                <el-button style="float: right" icon="el-icon-upload2" plain>导出</el-button>
            </div>
            <template>
                <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                <el-table
                        :data="tableData"
                        ref="multipleTable"
                        border
                        style="width: 100%">
                    <!--  用porp给这一列绑定 tableData中对应的属性 ，type=selection表示这一列是复选框 -->
                    <el-table-column
                            prop="id"
                            type="selection"
                            width="55"
                            align="center">
                    </el-table-column>
                    <!--  label="公司名称"表示这一列的表头是“公司名称”,width代表这一列宽度 -->
                    <el-table-column
                            prop="companyName"
                            label="公司名称"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyArea"
                            label="所在地区"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="channelLevel"
                            label="级别"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="contacts"
                            label="联系人"
                            width="90"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="contactsPhone"
                            label="联系方式"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="source"
                            label="来源"
                            width="160"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                            width="180"
                            type="date"
                            align="center"
                            value-format='yyyy-MM-dd'>
                    </el-table-column>

                    <el-table-column
                            label="状态"
                            width="100"
                            align="center">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    on-text ="开通"
                                    off-text = "禁用"
                                    on-color="#5B7BFA"
                                    off-color="#dadde5"
                                    @change=change(scope.$index,scope.row)>
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="操作">
                        <template scope="scope">
                            <el-button style="float:left; padding: 3px 0" type="text"
                                       @click=channel_view(scope.row)>编辑</el-button>
                            <div id="medel_box2">
                                <el-dialog :title="title" :visible.sync="updateDialogFormVisible"  @close="closeDialogFormVisible">
                                    <el-form :inline="true" :model="channelForm" ref="channelForm">
                                        <el-form-item label="公司名称" >
                                            <el-input v-model="channelForm.companyName" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="行业类型" >
                                            <el-input v-model="channelForm.industryType" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="所在区域" >
                                            <el-input v-model="channelForm.companyArea" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="邮编" >
                                            <el-input v-model="channelForm.postcode" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="业务联系人" >
                                            <el-input v-model="channelForm.contacts" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="联系人职位" >
                                            <el-input v-model="channelForm.contactsPost" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="联系人手机号" >
                                            <el-input v-model="channelForm.contactsPhone" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="QQ" >
                                            <el-input v-model="channelForm.qq" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="邮箱" >
                                            <el-input v-model="channelForm.email" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="详细地址" >
                                            <el-input v-model="channelForm.address" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="公司电话" >
                                            <el-input v-model="channelForm.conpanyTel" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="渠道级别" >
                                            <el-select v-model="channelForm.channelLevel" placeholder="请选择">
                                                <el-option label="关键合作渠道" value="A"></el-option>
                                                <el-option label="主要合作渠道" value="B"></el-option>
                                                <el-option label="普通合作渠道" value="C"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="签约时间" >
                                            <el-date-picker
                                                    v-model="channelForm.contractTime"
                                                    type="date"
                                                    placeholder="请选择日期"
                                                    format="yyyy 年 MM 月 dd 日">
                                            </el-date-picker>
                                        </el-form-item>

                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="updateDialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary" @click=channel_update(scope.row)>确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>

                            <el-popconfirm
                                    title="确认删除本条信息？"
                                    @confirm=channel_del(scope.row)>
                                <el-button slot="reference" style="float: left; padding: 3px 0;margin-left: 10px" type="text">删除</el-button>
                            </el-popconfirm>
                        </template>

                    </el-table-column>
                </el-table>
            </template>

            <template>
                <el-select v-model="selected" clearable placeholder="批量操作" style="margin-top: 30px">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-popconfirm
                        title="确认批量修改这些信息？"
                        @confirm=mulChannel_opt()>
                    <el-button slot="reference">确定</el-button>
                </el-popconfirm>
            </template>

            <template>
                <div class="block" style="float: right;margin-top: 30px">
                    <!-- size-change绑定的是每页显示数量变化时执行的方法，
                     current-change绑定的是翻页时执行的方法，
                     page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                     page-size属性时当前显示条数，
                     layout是翻页控件的布局顺序，
                     total绑定的是总共多少条数据-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 15, 20, 25]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
    </div>
</div>
<script th:inline="javascript">
    let app = new Vue({
            el:'#main',
            /*provide:{
               reload:this.reload
            },*/
            data:{
                //表格数据
                tableData:[],
                //总条数
                pageSize:10,
                //当前页
                currentPage:1,
                total:0,
                formInline: {
                    company_name: '',
                    company_area: '',
                    channel_level:''
                },
                searchDialogFormVisible:false,
                form:{
                    company_name: '',
                    company_area: '',
                    channel_level:'',
                    create_time:'',
                    status:'',
                    source:''
                },

                updateDialogFormVisible:false,
                title:'',
                channelForm:{
                    id:'',
                    companyName:'',
                    industryType:'',
                    companyArea:'',
                    postcode:'',
                    contacts:'',
                    contactsPost:'',
                    contactsPhone:'',
                    qq:'',
                    email:'',
                    address:'',
                    conpanyTel:'',
                    channelLevel:'',
                    contractTime:''
                },


                selected:"1",
                options: [{
                    value: "1",
                    label: '批量开通'
                }, {
                    value: "0",
                    label: '批量禁用'
                }],
                    value: ''
            },
            methods:{
                //重置普通搜索表单
                resetForm(formInline) {
                    this.$refs[formInline].resetFields();
                },

                //向后端发起请求，加载表格内容，传的参数是当前查第几页
                getData(val){
                    axios.get([[@{channel/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:val,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面

                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        for(let i = 0 ;i<this.tableData.length;i++){
                            if(this.tableData[i].status === 1){
                                this.tableData[i].status = true;
                            }else {
                                this.tableData[i].status = false;
                            }
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },
                //改变每页显示数据条数时执行的方法
                handleSizeChange(val){
                    this.pageSize=val;
                    this.currentPage=1;
                    this.getData(this.currentPage);
                },
                //翻页时执行的方法
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.getData(this.currentPage);
                },
                change:function(index,row){
                    console.log(index,row);
                },
                //点击添加时弹出模态框
                channel_add(){
                    this.updateDialogFormVisible=true;
                    this.title="新增渠道"
                },
                //点击编辑时弹出模态框
                channel_view(row){
                    this.updateDialogFormVisible = true;
                    this.title="修改渠道";

                    this.channelForm.id = row.id;
                    this.channelForm.companyName= row.companyName;
                    this.channelForm.industryType= row.industryType;
                    this.channelForm.companyArea= row.companyArea;
                    this.channelForm.postcode= row.postcode;
                    this.channelForm.contacts= row.contacts;
                    this.channelForm.contactsPost= row.contactsPost;
                    this.channelForm.contactsPhone= row.contactsPhone;
                    this.channelForm.qq= row.qq;
                    this.channelForm.email= row.email;
                    this.channelForm.address= row.address;
                    this.channelForm.conpanyTel= row.conpanyTel;
                    this.channelForm.channelLevel= row.channelLevel;
                    this.channelForm.contractTime= row.contractTime;
                },
                //封闭或作废模态框
                closeDialogFormVisible(){
                    this.$refs.channelForm.resetFields();
                    this.title="";//初始化title的值
                    this.channelForm={//初始化channelForm中的值
                        id:'',
                        companyName:'',
                        industryType:'',
                        companyArea:'',
                        postcode:'',
                        contacts:'',
                        contactsPost:'',
                        contactsPhone:'',
                        qq:'',
                        email:'',
                        address:'',
                        conpanyTel:'',
                        channelLevel:'',
                        contractTime:''
                    }

                },
                //判断为新增还是修改渠道
                channel_update(){
                    this.$refs.channelForm.validate(valid => {
                    if (valid) {
                        if (!this.channelForm.id) {//未传id，说明为新增，发送新增请求
                            axios({
                                method: 'POST',
                                url: [[@{channel/add}]],
                                data:this.channelForm
                            }).
                            then((res) => {
                                this.updateDialogFormVisible = false;
                                this.$message({
                                    message: '新增成功!',
                                    type: 'success'
                                });
                                this.getData(this.currentPage);
                            }).catch((e) => {
                                console.log(error);
                            })
                        } else {//发送修改请求
                            axios({
                                method: 'PUT',
                                url: [[@{channel/info}]],
                                data: this.channelForm
                        }).
                            then((res) => {
                                this.updateDialogFormVisible = false;
                                this.$message({
                                    message: '修改成功!',
                                    type: 'success'
                                });
                                this.getData(this.currentPage);
                            }).catch((e) => {
                                console.log(error);
                            })
                        }
                    }
                    });
                },

                //点击高级搜索时弹出模态框
                advSear(){
                    this.searchDialogFormVisible = true;
                },

                //删除时执行的方法
                channel_del(val){
                    axios.delete([[@{channel/}]]+val.id,{

                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.getData(this.currentPage);
                    }).catch(error => {
                        console.log(error);
                    })
                },
                //修改状态的请求
                change:function(index,row){
                    let now_status = row.status?1:0;
                    axios.put([[@{channel/status/}]]+row.id+"/"+now_status,{

                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量

                    }).catch(error => {
                        console.log(error);
                    })
                    console.log(row.id,row.status);
                },
                //批量操作的请求
                mulChannel_opt(){
                    let rows=this.$refs.multipleTable.selection;
                    let selOpt=this.selected;
                    if (rows.length != 0) {
                        let ids = [];
                        for (let i = 0; i < rows.length; i++) {
                            let row = rows[i];//代表的某一行
                            ids.push(row.id);
                        }
                        axios.put([[@{channel/mulOpt/}]]+ids + "/" + selOpt, {
                        }).then(res => {
                        }).catch(error => {
                            console.log(error);
                        })
                        console.log(ids,selOpt);

                        this.$alert('批量操作成功!', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                //将查询到的数据赋给表格中绑定的变量
                                this.getData(this.currentPage);
                            }
                        });
                    }else {
                        this.$message.error('请选择至少一条数据!');
                    }
                },

                //表单提交
                onSubmit() {
                    axios.get([[@{channel/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:1,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                                companyName:this.formInline.company_name,
                                companyArea:this.formInline.company_area,
                                channelLevel:this.formInline.channel_level
                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        for(let i = 0 ;i<this.tableData.length;i++){
                            if(this.tableData[i].status === 0){
                                this.tableData[i].status = true;
                            }
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                }
            },
            //高级搜索表单提交
            /*advancedSearch() {
                axios.get([[@{channel/page}]],{
                    params:{
                        //每页多少条
                        limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:1,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                            companyName:this.form.company_name,
                            companyArea:this.form.company_area,
                            channelLevel:this.form.channel_level,
                            createTime:this.form.create_time,
                            status:this.form.status,
                            source:this.form.source
                    }
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].status === 0){
                            this.tableData[i].status = true;
                        }
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
        },*/
            //创建时执行查询，查第一页
            created : function () {
                this.getData(1);
            }
    })
    let app3 = new Vue({
        el:"#top"
    })
</script>
</body>
</html>